<template>
  <div class="blog-list-container">
    <div class="search-filter">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="搜索文章标题、内容或标签..."
      />
      <select v-model="sortOption">
        <option value="latest">按时间排序</option>
        <option value="likes">按点赞数排序</option>
      </select>
    </div>
    <div v-for="blog in blogs" :key="blog.id" class="blog-item">
      <!-- <h3>{{ blog.title }}</h3> -->
      <img :src="blog.image" alt="Blog Image" v-if="blog.image" style="width: 100px; margin: 30px 20px;"/>
      <p>{{ blog.content }}</p>
      <router-link :to="`/blog/${blog.id}`">查看详情</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import life3 from "../images/life-3.jpg"
import Star1 from "../images/star-1.png"
import m3 from "../images/M-3.png"
const blogs = ref([
{ id: 1, content: '原来追星会不远万里一个人来不熟悉的城市 ​​' ,image:life3},
{ id: 2,  content: '#电影小小的我定档#打起鼓来敲起锣，新年来临之际，一切都有可能发生。12月31日和#电影小小的我#一起向前看。 ​',image:Star1 },
{ id: 3, content: ' 《死亡笔记》全员帅的很安心！(绘师:sso_s__) #最让你心动的二次元角色# ​​​' ,image:m3},
])

const searchQuery = ref('') 
const sortOption = ref('latest')
</script>

<style scoped>
.search-filter {
  margin-bottom: 20px;
}

.search-filter input {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-filter select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.blog-list-container {
  padding: 20px;
}

.blog-item {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style> 